<template>
  <div class="nav">
    <ul>
      <li v-for="(item,i) in list" :key="i">
        <router-link :to="'/home/'+router[i]">{{item}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["私人健康定制", "常见病症", "智能药铺", "一起伙拼"],
      router: ["index", "commonSymptoms", "herbal", "pairedTogether"]
    };
  }
};
</script>

<style scoped>
.nav {
  position: fixed;
  width: 100%;
  top:0px;
  background: #FFFFFF;
}
.nav ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  overflow-x: hidden;
  padding: 5px 0;
  margin: 0;
}
a {
  display: inline-block;
  padding-bottom: 5px;
  font-size: 14px;
  color: #747474;
}
.nav a.router-link-active {
  color: #0cb993;
  border-bottom: 2px solid #0cb993;
}
</style>